var input = document.querySelector("#input");
var button = document.querySelector("#button");
var ul = document.querySelector("#ul");




button.addEventListener('click' , function(){

   if (input.value == ""){
       alert("请输入待办事项");
   }else {

       //创建span标签并添加文本
       var span = document.createElement("span");
       var u = document.createTextNode(input.value);
       span.appendChild(u);
       span.className = "span2";

       //创建一编辑按钮
       var button2 = document.createElement("button");
       var b = document.createTextNode("编辑");
       button2.appendChild(b);

       //给编辑按钮点击事件,添加可修改事件
       button2.addEventListener('click',function(){

           span.setAttribute("contenteditable", "true");

       });
        //删除可修改事件
       span.addEventListener('blur',function(){

           span.setAttribute("contenteditable", "false");
       });


       //创建button标签并添加文本
       var button1 = document.createElement("button");
       var button1text = document.createTextNode("删除");
       button1.appendChild(button1text);

       //创建span
       var span1 = document.createElement("span");
       span1.className = "span1";

        //给span1点击事件
       var jk ="kk";
       span1.addEventListener('click', function () {

           if(jk =="kk"){

               span.classList.add("wn1");
               jk = "zk"

           } else{

               span.classList.remove("wn1");
               jk = "kk"

           }
       });


       //创建li标签
       var li = document.createElement("li");

       //添加span标签，button标签到li中
       li.appendChild(span1);
       li.appendChild(span);
       li.appendChild(button1);
       li.appendChild(button2);

       //给li清浮动
       li.className = "clearfix";


       //将li添加到ul中
       ul.appendChild(li);

       //点击button时移除li
       button1.addEventListener('click' , function(){

           //返回节点
           ul.removeChild(this.parentNode);

       });

       input.value = "";

   }

});


